<!-- 待办任务工作流 子组件 
 
需要接收参数：
目前的流程信息：FlowName
 
传给父组件的函数：checkHandle
 
-->
<template>
  <div>
    <!-- 待办任务列表 -->
    <div class="tablehah" style="margin-top: 2%">
      <a-table
        :columns="checkColumns"
        :data-source="checkData"
        :pagination="{ pageSize: 10 }"
      >
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" @click="checkHandle(record)">办理</a-button>
          <a-button
            type="primary"
            @click="finishInfoHandle(record)"
            style="margin-left: 2%"
            >流程信息</a-button
          >
        </span>
      </a-table>
    </div>

    <!-- 流程详情弹框 -->
    <a-modal v-model="finishInfoVisible" width="60%" title="任务详情">
      <a-table
        :columns="modalColumns"
        :data-source="modalData"
        :pagination="false"
      ></a-table>
      <p style="margin-top: 2%">当前任务流程图：</p>
      <img style="width: 100%" :src="imgUrl" />
      <template slot="footer">
        <a-button type="primary" @click="noVisible">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { workflowHttp } from "../../services/modules/workFlow";
const $http = new workflowHttp();

export default {
  data() {
    // 待办页、已办页表格列
    const checkColumns = [
      {
        title: "序号",
        dataIndex: "key",
        key: "key",
        align: "center",
      },
      {
        title: "申请人",
        dataIndex: "INITATOR",
        key: "INITATOR",
        align: "center",
      },
      {
        title: "审批人",
        dataIndex: "ASSIGNEE_",
        key: "ASSIGNEE_",
        align: "center",
      },
      {
        title: "当前任务进程",
        dataIndex: "NAME_",
        key: "NAME_",
        align: "center",
      },
      {
        title: "当前任务创建时间",
        dataIndex: "CREATE_TIME_",
        key: "CREATE_TIME_",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "action",
        key: "action",
        scopedSlots: { customRender: "action" },
        align: "center",
      },
    ];
    // 流程信息表格列
    const modalColumns = [
      {
        title: "序号",
        dataIndex: "key",
        key: "key",
        align: "center",
      },
      {
        title: "节点名称",
        dataIndex: "ACT_NAME_",
        key: "ACT_NAME_",
      },
      {
        title: "节点办理人",
        dataIndex: "ASSIGNEE_",
        key: "ASSIGNEE_",
      },
      {
        title: "开始时间",
        dataIndex: "START_TIME_",
        key: "START_TIME_",
      },
      {
        title: "结束时间",
        dataIndex: "END_TIME_",
        key: "END_TIME_",
      },
      {
        title: "办理时长",
        dataIndex: "ZTIME",
        key: "ZTIME",
      },
    ];
    return {
      // 待办任务列表数据
      checkColumns,
      checkData: [],

      // 流程信息数据
      finishInfoVisible: false,
      modalData: [],
      modalColumns,
      imgUrl: "",
    };
  },
  props: {
    // 流程名称
    FlowName: {
      type: String,
      required: true,
    },
  },
  computed: {},
  mounted() {
    this.postTasksList(); // 待办任务列表
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      console.log("获取用户信息", this.$store.state.user.ButtonRights);
      if (this.$store.state.user.ButtonRights.includes("workProcessDelete")) {
        this.deleteTag = true;
      }
    },
    // -------------- 根据流程信息获取已办任务数据 ----------------------
    // 拉取待办任务列表
    postTasksList() {
      this.checkData = [];
      let queryPath = "?processName=" + this.FlowName;
      $http.postUpcomingTasksList(queryPath).then((res) => {
        console.log("待办任务列表++++++++++++++++", res); // 根据流程名称进行相应的筛选

        let array = res.result.varList;
        for (let i = 0; i < array.length; i++) {
          // 排除流程外的信息，只显示该流程的待办任务
          let singleData = {
            key: i + 1,
            PROC_INST_ID_: array[i].PROC_INST_ID_, // 流程实例ID
            DGRM_RESOURCE_NAME_: array[i].DGRM_RESOURCE_NAME_, //流程图名称
            TASK_DEF_KEY_: array[i].TASK_DEF_KEY_, // 节点任务Key
            ID_: array[i].ID_, // 任务ID
            PNAME_: array[i].PNAME_, // 流程名称
            INITATOR: array[i].INITATOR, // 流程申请人
            PROC_DEF_ID_: array[i].PROC_DEF_ID_, // 流程定义ID
            ASSIGNEE_: array[i].ASSIGNEE_, // 办理人
            CREATE_TIME_: array[i].CREATE_TIME_, // 创建时间
            EXECUTION_ID_: array[i].EXECUTION_ID_, // 执行实例ID
            NAME_: array[i].NAME_, // 节点任务名称
          };
          this.checkData.push(singleData);
        }
      });
    },

    // 详情点击后，把record从子组件传递给父组件数据
    checkHandle(record) {
      this.$emit("send-record", record);
    },

    // 流程信息按钮点击触发
    finishInfoHandle(record) {
      this.modalData = [];
      this.imgUrl = "";
      this.recordData = record;
      let PROC_INST_ID_ = record.PROC_INST_ID_;
      let FILENAME = record.FILENAME;
      let singleFormData = new FormData();
      singleFormData.append("PROC_INST_ID_", PROC_INST_ID_);
      singleFormData.append("FILENAME", FILENAME);

      $http.postQueryHisInfo(singleFormData).then((res) => {
        // console.log("选中的节点信息+++++++++++++", res);

        this.modalData = res.result.hitaskList;
        for (let i = 0; i < this.modalData.length; i++) {
          // 删除 数组中的 "批准or驳回"
          if (this.modalData[i].ACT_NAME_ == "批准or驳回") {
            this.modalData.splice(i, 1);
          }
          if (this.modalData[i].END_TIME_ === null)
            this.modalData[i].END_TIME_ = "正在办理...";
        }
        // 数组的 key 赋值
        for (let i = 0; i < this.modalData.length; i++) {
          this.modalData[i].key = i + 1;
        }

        this.imgUrl = res.result.imgSrc;
        this.finishInfoVisible = true;
      });
    },

    // 关闭 按钮
    noVisible() {
      this.finishInfoVisible = false;
    },
  },
};
</script>

<style></style>
